<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" type="text" @keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input v-model="todo.completed" type="checkbox" @change="toggleTodo(index)">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'

export default {
  setup() {
    const store = useStore()
    const newTodo = ref('')

    const todos = computed(() => store.getters.allTodos)

    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        store.dispatch('addTodo', {
          text: newTodo.value,
          completed: false
        })
        newTodo.value = ''
      }
    }

    const toggleTodo = (index) => {
      store.dispatch('toggleTodo', index)
    }

    const deleteTodo = (index) => {
      store.dispatch('deleteTodo', index)
    }

    return {
      newTodo,
      todos,
      addTodo,
      toggleTodo,
      deleteTodo
    }
  }
}
</script>
